<template>
  <div class="backdrop-slot-example">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">🎨 Backdrop 插槽演示</h3>
      <p class="text-base-content/70 text-sm mb-4">
        演示如何使用 <code>#backdrop</code> 插槽自定义遮罩层样式
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 默认遮罩 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">默认遮罩</h4>
          <p class="text-sm text-base-content/70 mb-4">使用组件默认的遮罩层样式</p>

          <button @click="showDefaultModal = true" class="btn btn-primary btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 渐变遮罩 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">渐变遮罩</h4>
          <p class="text-sm text-base-content/70 mb-4">使用渐变背景的遮罩层</p>

          <button @click="showGradientModal = true" class="btn btn-secondary btn-sm">
            查看效果
          </button>
        </div>
      </div>

      <!-- 毛玻璃遮罩 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">毛玻璃遮罩</h4>
          <p class="text-sm text-base-content/70 mb-4">使用毛玻璃效果的遮罩层</p>

          <button @click="showBlurModal = true" class="btn btn-accent btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 彩色遮罩 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">彩色遮罩</h4>
          <p class="text-sm text-base-content/70 mb-4">使用彩色渐变的遮罩层</p>

          <button @click="showColorModal = true" class="btn btn-warning btn-sm">查看效果</button>
        </div>
      </div>
    </div>

    <!-- 默认遮罩 Modal -->
    <Modal v-model:visible="showDefaultModal" size="lg">
      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">🎯</div>
          <h3 class="text-xl font-bold mb-2">默认遮罩</h3>
          <p class="text-base-content/70">这是使用默认遮罩层的弹窗</p>
        </div>
      </template>
    </Modal>

    <!-- 渐变遮罩 Modal -->
    <Modal v-model:visible="showGradientModal" size="lg">
      <template #backdrop>
        <div
          class="absolute inset-0 bg-gradient-to-br from-primary/30 to-secondary/30 backdrop-blur-sm"
        ></div>
      </template>

      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">🌈</div>
          <h3 class="text-xl font-bold mb-2">渐变遮罩</h3>
          <p class="text-base-content/70">这是使用渐变背景的遮罩层</p>
        </div>
      </template>
    </Modal>

    <!-- 毛玻璃遮罩 Modal -->
    <Modal v-model:visible="showBlurModal" size="lg">
      <template #backdrop>
        <div class="absolute inset-0 bg-black/20 backdrop-blur-xl"></div>
      </template>

      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">🔮</div>
          <h3 class="text-xl font-bold mb-2">毛玻璃遮罩</h3>
          <p class="text-base-content/70">这是使用毛玻璃效果的遮罩层</p>
        </div>
      </template>
    </Modal>

    <!-- 彩色遮罩 Modal -->
    <Modal v-model:visible="showColorModal" size="lg">
      <template #backdrop>
        <div
          class="absolute inset-0 bg-gradient-to-br from-purple-500/30 to-pink-500/30 backdrop-blur-md"
        ></div>
      </template>

      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">🎨</div>
          <h3 class="text-xl font-bold mb-2">彩色遮罩</h3>
          <p class="text-base-content/70">这是使用彩色渐变的遮罩层</p>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Modal } from '@/components/common/modal'

defineOptions({
  name: 'BackdropSlotExample',
})

// 控制各个Modal的显示状态
const showDefaultModal = ref(false)
const showGradientModal = ref(false)
const showBlurModal = ref(false)
const showColorModal = ref(false)
</script>

<style scoped>
.backdrop-slot-example {
  font-family:
    'Inter',
    'SF Pro Display',
    'SF Pro Text',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    sans-serif;
}

code {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  background: hsl(var(--b2));
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
</style>
